<!-- Horizontal Form -->
 <div class="box box-info" id="user-edit-app">
      <div class="box-header with-border">
        <h3 class="box-title">{{title}}</h3>
      </div>
      <!-- /.box-header -->
      <!-- form start -->
      <form class="form-horizontal">
        <div class="box-body">
          <div class="form-group">
            <label for="usernameId" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="usernameId" v-model="username">
            </div>
          </div>
          <div class="form-group" id="pwdDiv">
            <label for="passwordId" class="col-sm-2 control-label">密码</label>

            <div class="col-sm-10">
              <input type="password" class="form-control"  id="passwordId" v-model="password">
            </div>
          </div>

          
          <div class="form-group">
            <label for="emailId" class="col-sm-2 control-label">邮箱</label>
            <div class="col-sm-10">
              <input type="text" class="form-control"  id="emailId" v-model="email">
            </div>
          </div>
          <div class="form-group">
            <label for="phoneId" class="col-sm-2 control-label">手机号</label>
              <div class="col-sm-10">
              <input type="text" class="form-control"  id="phoneId" v-model="mobile">
            </div>
          </div>
          <div class="form-group">
            <label for="rolesId" class="col-sm-2 control-label">角色</label>
            <div class="col-sm-10" id="rolesId">
              <!--是element-ui的复选框组件
              注意:该组件和传统的checkbox的不同在于label属性，
               该属性中将来要保存id值，因为这里的checkbox被选中后，可以获取到的就是lable的属性值-->
              <el-checkbox-group v-model="checkedRoleIds">
                <el-checkbox v-for="role in roleList" :label="role.id">{{role.name}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
          <button type="button" class="btn btn-default btn-cancel" @click="docancel">取消</button>
          <button type="button" class="btn btn-info pull-right btn-save" @click="saveOrUpdateUser()">{{btnVal}}</button>
        </div>
        <!-- /.box-footer -->
      </form>
    </div>
<script type="text/javascript" src="bower_components/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="bower_components/layer/layer.js"></script>
<script type="text/javascript">
  var userEditApp= new Vue({
    el:"#user-edit-app",
    data:{
      title:'添加用户',
      btnVal:'添加',
      username:'',
      password:'',
      email:'',
      mobile:'',
      checkedRoleIds:[],
      roleList:{}
    },
    methods:{
      loadRoleList:function () {
        axios({
          method:'get',
          url:'/sys-roles/findAllRoles'
        }).then(res=>{
          let result=res.data;
          if(result.state==2000){
            this.roleList=result.data;
          }else{
            alert(result.message);
          }

        }).catch(e=>console.error(e.message))
      },
      saveOrUpdateUser:function () {
          //添加数据
        let formData=this.getFormData();
        if(!formData){
          alert('获取表单数据异常!');
          return;
        }
        let userId=$('#mainContentId').data('userId');
        let url='/sys-users/saveUser';
        if (userId){
          url='/sys-users/updateUser';
          formData.append("id",userId)
        }
        //发起axios post 请求 ,向后端提交数据
        axios({
          method:'post',
          url:url,
          data:formData
        }).then(res=>{
          let result=res.data;
          if(result.state==2000){
            alert('操作成功!');
           this.docancel();
          }else{
            alert(result.message);
          }
        }).catch(e=>console.error(e.message))
      },
      getFormData:function () {
        let username=this.username;
        //判断用户名是否输入
        if(!username){
          alert("请输入用户名!");
          return;
        }
        let password=this.password;
        let userId=$('#mainContentId').data('userId');
        if(!userId){
          if(!password){
            alert("请输入密码!");
            return;
          }
        }

        let email=this.email;
        let mobile=this.mobile;
        let roleIds=this.checkedRoleIds;//用户选择角色id 的数组
        //角色必选
        if(roleIds.length<1){
          alert("请选择角色!");
          return;
        }
        //将对象封装
        let formData=new FormData();
        formData.append("username",username);
        formData.append("password",password);
        formData.append("email",email);
        formData.append("mobile",mobile);
        formData.append("roleIds",roleIds);
        return formData;
      },
      docancel:function () {
        let userId=$('#mainContentId').data('userId');
        if (userId){
          $('#mainContentId').data('userId','');
        }
        //跳转到角色列表视图
        $('#mainContentId').load('/sys/userListPage');
      }
    },
    mounted(){
      this.loadRoleList();
      let userId=$('#mainContentId').data("userId");
      if(userId){
          this.title='修改用户';
          this.btnVal="修改";
        //  获取username
          axios({
            url:'/sys-users/getUserByUserId?userId='+userId,
            method:'get',
          }).then(res=>{
            let result=res.data;
            if(result.state==2000){
              this.username=result.data.username;
              //this.password=result.data.password;
              this.email=result.data.email;
              this.mobile=result.data.mobile;
              this.checkedRoleIds=result.data.roleIds;
            }else{
              alert(result.message);
            }

          }).catch(e=>console.error(e.message))


      }
    }
  })

</script>
    
    
    
    
    
    
    